<template>
  <div class="articleDetail">
    <navContent></navContent>
    <div class="allContent">
      <div class="title">{{title}}</div>
      <div class="info">
        <span class="author text"><i class="el-icon-edit"></i>作者：{{author}}</span>
        <span class="time text"><i class="el-icon-alarm-clock"></i>发布时间：{{changeTime(createTime)}}</span>
        <span class="wordNum text">字数：{{num}}</span>
      </div>
      <div class="content">
        <p style="font-size:14px;color:#999;">{{content}}</p>
        <div style="display:flex;justify-content:flex-end;align-items:center;padding: 0 20px;">
          <el-button :type="type" round size="mini" @click="add('')">👍 赞<span>{{count}}</span></el-button>
        </div>
      </div>
    </div>
    <div class="comments">
      <div class="write">
        <div class="user">
          <img src="" alt="当前用户">
        </div>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 6}"
          placeholder="写下你的精彩评论..."
          v-model="comments"
          style="width:100%;">
        </el-input>
      </div>
      <div class="btn-box">
        <button class="btn" @click="send()">发布</button>
      </div>
      <div class="commentArea">
        <div class="commentsContent">
          <el-card shadow="never" :body-style="{ padding: '10px' }" v-for="(item,index) in commentLists" :key="index">
            <div class="commentsUserInfo">
              <div class="commentsUser">
                <img :src="item.img" alt="用户头像">
              </div>
              <div>
                <p class="name">{{item.userName}}</p>
                <p class="createTime">{{item.createTime}}</p>
              </div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding: 0 20px;">
              {{item.content}}
              <el-button :type="item.type" round size="mini" @click="add(index)">👍 赞<span>{{item.count}}</span></el-button>
            </div>
          </el-card>
        </div>
        <div style="position:absolute;bottom:10px;left:50%;transform:translateX(-50%)">
          <el-pagination
            style="margin:0 auto;"
            background
            layout="prev, pager, next, jumper"
            @current-change="CurrentPageChange"
            :current-page.sync="currentPage"
            :total="100">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navContent from '@/components/navContent'
export default {
  name: 'articleDetail',
  components: {
    navContent,
  },
  data () {
    return {
      count: 0,//文章点赞数
      index: '',
      currentPage: 1,//当前页
      num: 12345,//字数
      createTime: '',//发布时间
      title: '', //文章标题
      author: '',//作者
      content: "",//文章内容
      comments: '',// 评论内容
      commentLists: [
        {
          img: '',//头像地址
          userName: '会说话的小蚂蚁',//用户名称
          createTime: '2019-10-10 21:49',
          content: '这篇文章真心不错！！！👍',//评论内容
          type: 'default',
          count: 0
        },
        {
          img: '',//头像地址
          userName: '会说话的小蚂蚁',//用户名称
          createTime: '2019-10-10 21:49',
          content: '这篇文章真心不错！！！👍',//评论内容
          type: 'default',
          count: 0
        }
      ],// 评论列表
      type: 'default'//点赞按钮状态
    }
  },
  methods: {
    // 时间转换
    changeTime (time) {
      let dateee = new Date(time).toJSON();
      let date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')  
      return date
    },
    // 发布
    send () {
      console.log(this.comments)
    },
    // 当前页变化
    CurrentPageChange (num) {
      this.currentPage = num
      console.log(this.currentPage)
    },
    //点赞按钮状态
    add (i) {
      let that = this
      if (i !== '') {
        that.index = i
        that.commentLists.forEach((ele,ib) => {
          if (that.index === ib && ele.type === 'default') {
            ele.type = 'primary'
            ele.count = ele.count+1
          } else if (that.index === ib && ele.type === 'primary') {
            ele.type = 'default'
            ele.count = ele.count-1
          }
        })
      } else {
        if (this.type === 'default') {
          this.count = this.count+1
          this.type = 'primary'
        } else {
          this.count = this.count-1
          this.type = 'default'
        }
      }
    }
  },
  
  created () {
    this.$get('/articles',{id:this.$route.query.id,user:this.$route.query.user}).then(res => {
      res.results.forEach(ele => {
        this.title = ele.title
        this.author = ele.user.username
        this.createTime = ele.created_time
        this.content = ele.body
        this.num = ele.body.length
      })
    })
  }
}
</script>

<style lang="less" scoped>
.allContent {
  width: 70%;
  margin: 0 auto;
  margin-top: 10px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 5px;
  background: #fff;
  .title {
    font-size: 35px;
    font-weight: bold;
    color: #333;
  }
  .info i {
    margin-right: 5px;
  }
  .text {
    margin-right: 10px;
    font-size: 12px;
    color: #969696;
  }
  .content {
    font-size: 18px;
    color: #666;
  }
  .content .img {
    max-width: 500px;
    max-height: 281px;
    text-align: center;
    margin: 0 auto;
  }
  .content img {
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
  }
  
}
.comments {
  width: 70%;
  height: 800px;
  margin: 0 auto;
  margin-top: 10px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 5px;
  background: #fff;
  .write {
    display: flex;
    .user {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      border: 1px solid #eee;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .btn-box {
    margin-top: 10px; 
    text-align: right;
    .btn {
      width:80px;
      padding:5px;
      color:#fff;
      border-radius:5px;
      border:1px solid #ec7259;
      outline:none;
      background:#ec7259
    }
  }
  .commentArea {
    width: 100%;
    height: 700px;
    margin-top: 10px;
    position: relative;
    // border: 1px solid #eee;
    overflow-x: hidden;
    overflow-y: auto;
    .commentsContent {
      .commentsUserInfo {
        display: flex;
        align-items: center;
        .commentsUser {
          width: 40px;
          height: 40px;
          margin-right: 10px; 
          border: 1px solid #eee;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .name {
          color: #333;
          font-size: 14px;
        }
        .createTime {
          margin-top: -8px;
          color: #ccc;
          font-size: 12px;
        }
      }
      /deep/.el-card {
        margin-bottom: 5px;
      }
    }
  }
}
</style>

